<template>
  <div class="basic-list-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>客户常规数据管理</span>
          <el-button type="primary" @click="handleAdd">新增常规数据</el-button>
        </div>
      </template>

      <el-table :data="basicList" border stripe v-loading="loading">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="数据名称" />
        <el-table-column prop="sort" label="排序" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="180" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
      <el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px">
        <el-form-item label="数据名称" prop="title">
          <el-input v-model="formData.title" placeholder="请输入数据名称" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" :min="0" :max="999" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import request from '@/utils/request'

  // 数据相关
  const basicList = ref<any[]>([])
  const loading = ref(false)

  // 对话框相关
  const dialogVisible = ref(false)
  const dialogTitle = ref('')
  const isEdit = ref(false)

  // 表单数据
  const formData = reactive({
    id: 0,
    title: '',
    sort: 0,
    status: 1,
  })

  // 表单验证规则
  const formRules = {
    title: [{ required: true, message: '请输入数据名称', trigger: 'blur' }],
  }

  // 表单引用
  const formRef = ref()

  // 获取常规数据列表
  const getBasicList = async () => {
    loading.value = true
    try {
      const res: any = await request({
        url: '/api/customer/basic/list',
        method: 'get',
      })
      if (res.code === 0) {
        basicList.value = res.data.list || res.data
      }
    } catch (error) {
      ElMessage.error('获取常规数据列表失败')
    } finally {
      loading.value = false
    }
  }

  // 新增常规数据
  const handleAdd = () => {
    dialogTitle.value = '新增常规数据'
    isEdit.value = false
    // 重置表单
    Object.assign(formData, {
      id: 0,
      title: '',
      sort: 0,
      status: 1,
    })
    dialogVisible.value = true
  }

  // 编辑常规数据
  const handleEdit = (row: any) => {
    dialogTitle.value = '编辑常规数据'
    isEdit.value = true
    // 填充表单数据
    Object.assign(formData, row)
    dialogVisible.value = true
  }

  // 删除常规数据
  const handleDelete = (row: any) => {
    ElMessageBox.confirm('确定要删除该常规数据吗？', '提示', {
      type: 'warning',
    })
      .then(async () => {
        try {
          const res: any = await request({
            url: '/api/customer/basic/del',
            method: 'delete',
            data: { id: row.id },
          })
          if (res.code === 0) {
            ElMessage.success('删除成功')
            getBasicList()
          } else {
            ElMessage.error(res.msg || '删除失败')
          }
        } catch (error) {
          ElMessage.error('删除失败')
        }
      })
      .catch(() => {
        // 取消删除
      })
  }

  // 提交表单
  const handleSubmit = () => {
    formRef.value.validate(async (valid: boolean) => {
      if (valid) {
        try {
          let res: any
          if (isEdit.value) {
            // 编辑
            res = await request({
              url: '/api/customer/basic/edit',
              method: 'put',
              data: formData,
            })
          } else {
            // 新增
            res = await request({
              url: '/api/customer/basic/add',
              method: 'post',
              data: formData,
            })
          }

          if (res.code === 0) {
            ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
            dialogVisible.value = false
            getBasicList()
          } else {
            ElMessage.error(res.msg || (isEdit.value ? '编辑失败' : '新增失败'))
          }
        } catch (error) {
          ElMessage.error(isEdit.value ? '编辑失败' : '新增失败')
        }
      }
    })
  }

  // 组件挂载时获取数据
  onMounted(() => {
    getBasicList()
  })
</script>

<style scoped>
  .basic-list-container {
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
